<template>
	<view class="main">
		<view class="card1">
			<view class="title">
				<h2>异常原因：</h2>
			</view>
			<view class="tag-part">
				<template v-for="(item,index) in tagDatas">
					<view class="tag-view" :key="index">
						<u-tag :text="item.label" class="tag-part" @click="tagChange(item,index)" type="primary"
							:mode="tagCurrent===index?'dark':'plain'" />
					</view>
				</template>
			</view>
		</view>
		<view class="card2">
			<view class="label-part">
				持续时间：
			</view>
			<view class="time-part">
				00:00:00
			</view>
			<view class="button-part">
				<view class="circle1" :class="isBeging?'start':'end'">
					<view class="circle0" @click="handleClick">异常<br>{{isBeging?'开始':'解决'}}</view>
				</view>
			</view>
			<!-- <view class="remark-part">
				发起15分钟后正式提交
			</view> -->
		</view>
		<view class="card3" v-if="!isBeging">
			<view class="item" v-for="(item,index) in detailDatas['card3']" :key="index">
				<view class="label-part">
					{{ item.label+'：'}}
				</view>
				<view class="text-part">
					{{ item.prop?  rowData[item.prop]:''}}
				</view>
			</view>
		</view>
		<view class="card4">
			<view class="item card-item">
				<view class="label-part">
					异常描述：
				</view>
				<view class="text-part">
					<u-input type="textarea" v-model="Description" class="input-textarea"></u-input>
				</view>
			</view>
		</view>
		<view class="card5">
			<view class="item" v-for="(item,index) in detailDatas['card5']" :key="index">
				<view class="label-part">
					{{ item.label+'：'}}
				</view>
				<view class="text-part">
					{{ item.prop ?  query[item.prop]:''}}
				</view>
			</view>
		</view>
		<view class="card4">
			<view class="item card-item">
				<view class="label-part">
					异常照片：
				</view>
				<view class="text-part">
					<u-upload ref="uUploadRef" :action="uploadDatas.action" :auto-upload="false" width="100px"
						:form-data="uploadDatas.formData" height="100px" @on-list-change="fileChange" name='file'
						:max-count="5" @on-uploaded="onUploaded">
					</u-upload>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	// 开始异常
	export default {
		data() {
			return {
				isBeging: true,
				rowData: null,
				tagDatas: [],
				tagCurrent: 0,
				detailDatas: {
					card3: [{
							prop: '',
							label: '开始时间'
						},
						{
							prop: '',
							label: '结束时间'
						},
					],
					card4: [{
							prop: '',
							label: '异常描述',
							type: 'textarea'
						},

					],
					card5: [{
							prop: 'SourceOrderNo',
							label: 'PO单号'
						},
						{
							prop: 'PreparePlanName',
							label: '任务名称'
						},
						{
							prop: 'MaterialName',
							label: '组件名称'
						},
						{
							prop: 'Code',
							label: '零件图号'
						},
					],
				},
				Description: '',
				query: {},
				uploadDatas: {
					action: 'http://218.13.39.165:9999/APSAPI/UploadAbnomalImages',
					formData: {},
					fileList: [],
					timestamp: '',
					id: null,
				},
			};
		},
		onLoad(e) {
			Object.keys(e).forEach(val => {
				e[val] = e[val]
			})
			this.query = e
			this.getAbnormalOptions()
		},
		methods: {
			fileChange(lists) {
				this.uploadDatas.fileList = lists
			},
			tagChange(item, index) {
				if (!this.isBeging) return
				this.tagCurrent = index
			},
			async handleClick() {
				if (this.isBeging) {
					// 异常开始
					let message = ''
					if (!this.Description) message = '填写异常描述'
					if (message) return uni.showToast({
						title: message,
						icon: 'error'
					})
					const timestamp = this.$u.timeFormat(new Date(), 'yyyymmddhhMMss')
					this.uploadDatas.timestamp = timestamp
					const rowData = this.query
					rowData.AbnormalDescription = this.Description
					// rowData.SubmitType = 3
					rowData.AbnormalReasonID = this.tagDatas[this.tagCurrent].value
					const res = await this.$request.post({
						url: '/APSAPI/HandleTaskManagement',
						data: [rowData]
					}).catch(err => err)
					if (!res) return
					const {
						msg,
						id
					} = res
					uni.showToast({
						title: msg,
						icon: 'success'
					})
					this.uploadDatas.id = id
					// 先修改任务状态 成功后再请求上传对应图片
					if (this.uploadDatas.fileList.length) {
						this.uploadDatas.formData.nickName = this.query.SourceOrderNo
						this.uploadDatas.formData.id = id
						this.uploadDatas.formData.dicID = 24400
						setTimeout(() => {
							uni.showLoading({
								title: '图片上传中...'
							})
							this.$refs.uUploadRef.upload()
						}, 1000)
					}
				}
			},
			async getAbnormalOptions() {
				const condition = {
					dicID: 7770,
				}
				const res = await this.$request.post({
					url: '/APSAPI/APSData',
					data: condition
				}).catch(err => err)
				if (!res) return
				const {
					data
				} = res
				this.$set(this, 'tagDatas', data.map(val => {
					return {
						label: val.SmallType,
						value: val.AbnormalReasonID
					}
				}))
			},
			// 所有图片上传完毕
			onUploaded() {
				uni.hideLoading()
				uni.showToast({
					title: '图片上传成功！',
					icon: 'success'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: $uni-bg-color-grey;
		width: 100%;
		height: 100%;
		min-height: 100vh;
	}

	.tag-part {
		text-wrap: nowrap;
		text-overflow: ellipsis;
		// max-width: 100%;
		width: 100%;
		overflow: hidden;
		font-size: 24rpx;
	}

	.card1,
	.card2,
	.card3,
	.card4,
	.card5 {
		background-color: $uni-bg-color;
		margin-bottom: 10rpx;
		padding: 20rpx 20rpx;
		width: 100%;
	}

	.card1 {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		flex-direction: column;

		.title {
			color: $uni-color-primary;
		}

		.tag-part {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.tag-view {
				max-width: 25%;
				margin-right: 15rpx;
			}
		}

	}

	.label-part {
		display: flex;
		align-items: flex-start;
		color: $uni-text-color-placeholder;
		justify-content: flex-end;
		width: 150rpx;
		min-width: 150rpx;
		font-size: small;
	}

	.card2 {
		display: flex;
		flex-wrap: nowrap;
		position: relative;

		.label-part {
			align-items: center;
		}

		.remark-part {
			position: absolute;
			bottom: 10rpx;
			font-size: 20rpx;
			color: $uni-text-color-placeholder;
			left: 50%;
			left: 50%;
			/* 左边距设置为父元素宽度的50% */
			transform: translateX(-50%);
		}

		.time-part {
			flex-grow: 1;
			display: flex;
			align-items: center;
			color: $uni-color-primary;
			font-size: 60rpx;
			padding: 0 0 0 10rpx;
		}

		.button-part {
			// width:;
			padding: 0 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.start {
				background-color: rgb(250, 181, 80, 0.4);

				>* {
					background-color: #fab451;
				}
			}

			.end {
				background-color: rgb(81, 131, 255, 0.4);

				>* {
					background-color: rgb(81, 131, 255);
				}
			}

			.circle1 {

				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;

				.circle0 {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					font-size: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;

				}

			}
		}
	}

	.card-item {
		flex-direction: column;

		.input-textarea {
			text-indent: 40rpx;
		}
	}

	.card3,
	.card4,
	.card5 {
		display: flex;
		flex-direction: column;

		.item {
			display: flex;
			flex-wrap: nowrap;
			overflow: hidden;
			margin-bottom: 10rpx;
		}

		.text-part {
			flex-grow: 1;
			color: #000;
			text-indent: 5rpx;
			padding-left: 10rpx;
			text-wrap: wrap;
		}
	}
</style>